/**
 * Created by Administrator on 2017/2/27.
 */
var SideBar = require('../../src/complex/sideBar');
var Pagination = require('../../../src/libs/pagination');
function hasClass(elem, cls) {
    elem = elem || {};
    return new RegExp("\\b" + cls + "\\b").test(elem.className);
};
//添加样式
function addClass(elem, cls) {
    elem = elem || {};
    hasClass(elem, cls) || (elem.className += " " + cls);
    elem.className = elem.className.replace(/^\s|\s$/g, "").replace(/\s+/g, " ");
    return this;
};
//删除样式
function removeClass(elem, cls) {
    elem = elem || {};
    if (hasClass(elem, cls)) {
        elem.className = elem.className.replace(new RegExp("(\\s|^)" + cls + "(\\s|$)"), "");
    }
    return this;
};
var Root = React.createClass({
    getInitialState: function () {
        return{
            noticesList: PageDM.Notices.value,
            pageVal: PageDM.pagination.value,
            sideBarItem:PageDM.sideBar.value
        }
    },
    pageClick:function (v) {
        PageDM.pagination.setValue({curPage:v});
        PageDM.pagination.onClick(v);
    },
    componentDidMount: function(){
        var _this = this;
        UEventHub.on(PageDM.pagination.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                pageVal: v
            });
        });
        UEventHub.on(PageDM.Notices.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                noticesList: v
            });
        });
        UEventHub.on(PageDM.pagination.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                pageVal: v
            });
        });
        UEventHub.emit("pageLoad","hello world!");
    },
    showOrHideHandler: function(e){
        var source = e.target || e.srcElement;
        if(hasClass(source.parentNode.parentNode,"down")){
            removeClass(source.parentNode.parentNode,"down");
        }else{
            addClass(source.parentNode.parentNode,"down");
        }
    },
    render: function() {
        var _this = this;
        return (
            <div>
                <div className="mod-account container">
                    <div className="sub-nav">
                        <SideBar sideBarItem={_this.state.sideBarItem}/>
                    </div>
                    <div className="account padding">
                        <div className="help-main">
                            <div className="notice-center">
                                <div className="mod-title title"><b></b>平台公告<b></b></div>
                                <div>
                                    {
                                        _this.state.noticesList.map(function(notice,index){
                                            return (
                                                <div className="list">
                                                    <div className="t">
                                                        <i className="iconfont icon-meg2 unread"></i>{notice.Title}
                                                        <span className="message-time">{notice.CreateTime}</span>
                                                        <a onClick={_this.showOrHideHandler} href="javascript:;" className="showhide bg-icon"></a>
                                                    </div>
                                                    <div className="content">{notice.Description}</div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                                <Pagination  pageVal={_this.state.pageVal} onClick={this.pageClick}></Pagination>
                            </div>
                        </div>
                    </div>
                    <div className="clear"></div>
                </div>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('giraffe'));